<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>角色管理</title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${path}/css/metroStyle/metroStyle.css">
    <script src="${path}/js/jquery.ztree.all.js"></script>

</head>
<body>
    <h2>角色列表</h2>
    <div class="layui-fluid" >
        <div class="layui-row">
            <div class="layui-col-md7" style="margin-right: 20px">
                <table id="roleTable" lay-filter="roleTable"></table>
            </div>
            <div class="layui-col-md4">
                <h3>角色权限</h3>
                <hr>
                <ul id="treeDemo" class="ztree"></ul>
                <button style="width: 100%" onclick="shouquan();" class="layui-btn layui-btn-success">授权</button>
            </div>
        </div>
    </div>

<script>
    var isTrue = true;
    //判断是否存在重复的登录名称
    function selectUserName(){
        var userName = $(":input[name = 'rolename']").val();
        var id = $(":input[name = 'id']").val();
        $.get("${path}/role/getRole",{userName:userName,id:id},function (data) {
            if(data != ""){
                layer.msg("该角色已存在!");
                isTrue = false;
            }else{
                isTrue = true;
            }
        });
    }

    var roleId;
    function shouquan() {
        //先获取所有选中的节点，其实就是要一个编号
        var nodes = zTreeObj.getCheckedNodes(true);
        var str = "";
        $.each(nodes,function () {
            str += this.id + ",";
        });
        str = str.substring(0,str.length - 1);
        //发送异步请求，参数：角色编号、一组权限编号
        $.post("${path}/role/shouquan",{
            roleId:roleId,
            persIds:str
        },function () {
            layer.msg("授权成功",{icon:1})
        })
    }
    //zTree参数配置
    var setting={
        check:{
            enable:true,
            chkStyle:'checkbox',
        },
        data:{
            key:{
                name:'name',
            }
        },
        children:[{
            spread:false,
        }]
    }
    //zTree的数据属性

    $(window).ready(function () {
        $.get("${path}/permission/parentList",function (zNodes) {
            zTreeObj=$.fn.zTree.init($("#treeDemo"),setting,zNodes);
        })
    });
    layui.use('table',function () {
        var table=layui.table;
        //渲染表格
        table.render({
            elem:'#roleTable',
            url:'${path}/role/list',
            page:true,
            toolbar:'#toolbarDemo',
            cols:[[
                {type: 'radio'},
                {field: 'id',title:'编号'},
                {field: 'rolename',title: '角色名称'},
                {toolbar:'#barDemo',title:'操作'}
            ]]
        })

        //监听行工具事件
        table.on("tool(roleTable)",function (obj) {
            var data=obj.data;
            if (obj.event=='edit'){
                $.get("${path}/role/form",function (str) {
                    layer.open({
                        type:1,
                        offset:'t',
                        title:'修改用户',
                        content:str,
                        area: '700px',
                        skin:'layui-layer-molv',
                        btn:['确定','取消'],
                        success:function () {
                            $.get("${path}/role/view",{id:data.id},function () {
                                //显示数据
                                layui.form.val("roleForm",data);
                            })
                        },
                        yes:function (index) {
                            var params=$("#update_role_form").serialize();
                            $.post("${path}/role/update",params,function () {
                                layer.close(index);
                                table.reload("roleTable");
                            })
                        }
                    })
                })

            }else if (obj.event=='del'){
                layer.open({
                    time:0,
                    title:'友情提示',
                    content:'确定要删除此行数据吗？',
                    shade:[0.3,'#000'],
                    btn:['确定','取消'],
                    yes:function () {
                        $.post("${path}/role/delete",{id:data.id},function () {
                            layer.msg('删除成功');
                            table.reload('roleTable');
                        })
                    }
                })
            }

        })
        //监听工具栏事件
        table.on('toolbar(roleTable)',function (obj) {
            var e=obj.event;
            switch (e) {
                case "add":
                    $.get("${path}/role/addform",function (str) {
                        layer.open({
                            type: 1,
                            title:'添加角色',
                            area:'700px',
                            content: str,
                            skin:'layui-layer-molv',
                            btn:['确定','取消'],
                            success:function(){
                              $(":input[name = 'rolename']").blur(function () {
                                  selectUserName();
                              })
                            },
                            yes:function (index) {
                                selectUserName();
                                if(isTrue){
                                    var params=$("#add_role_form").serialize();
                                    console.log(params);
                                    $.post("${path}/role/add",params,function () {
                                        layer.close(index);
                                        table.reload('roleTable');
                                    })
                                }
                            }
                        })
                    })
            }
        })
        
        //监听单选框事件
        table.on("radio(roleTable)",function (obj) {
            roleId=obj.data.id;
            //发送一个异步请求，查询选中的角色对应的权限，只需要编号
            $.post("${path}/role/rolePers",{id:obj.data.id},function (data) {
                //先获取所有的根节点
                var nodes=zTreeObj.transformToArray(zTreeObj.getNodes());
                $.each(nodes,function () {
                    //判断当前节点编号是否在  角色对应的权限编号数组中，说明该选中，否则不选中
                    if ($.inArray(this.id,data)!=-1){
                        zTreeObj.checkNode(this,true,true);
                    }else {7
                        zTreeObj.checkNode(this,false,true);
                    }
                })
            })
        })
    })


</script>

    <script type="text/html" id="barDemo">
        <a href="javascript:void (0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
        <a href="javascript:void (0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加</button>
        </div>
    </script>
</body>
</html>
